<template>
  <ele-page>
    <!-- 搜索表单 -->
    <PageSearch @search="reload" />
    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 数据表格 -->
      <ele-pro-table
        ref="tableRef"
        row-key="id"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="false"
        highlight-current-row
        cache-key="SystemActionLogTable"
      >
        <!-- 表头工具栏 -->
        <template #toolbar>
        </template>

        <template #url="{ row }">
          <ele-copyable v-if="row.url" style="max-width: 100%; ">
            <ele-ellipsis :tooltip="true">
              {{ row.url.replace(baseUrl, '/') }}
            </ele-ellipsis>
          </ele-copyable>
        </template>
        <template #param="{ row }">
          <ele-copyable v-if="row.param" style="max-width: 100%; ">
            <ele-ellipsis :tooltip="true">
              {{ row.param }}
            </ele-ellipsis>
          </ele-copyable>
        </template>
        <template #content="{ row }">
          <ele-copyable v-if="row.content" style="max-width: 100%; ">
            <ele-ellipsis :tooltip="true">
              {{ row.content }}
            </ele-ellipsis>
          </ele-copyable>
        </template>

        <!-- 操作状态列 -->
        <template #action="{ row }">
          <el-link type="primary" @click="openInfo(row)">详情</el-link>
        </template>
      </ele-pro-table>
    </ele-card>

    <PageInfo v-model="showInfo" :data="current" />
  </ele-page>
</template>

<script setup>
import PageInfo from './components/info.vue'
import PageSearch from './components/search.vue'

defineOptions({
  name: 'SystemActionLog',
})
const baseUrl = import.meta.env.VITE_API_URL

/** 表格实例 */
const tableRef = ref(null)
const current = ref({})
const showInfo = ref(false)

const columns = [
  {
    type: 'index',
    label: '序号',
    fixed: 'left',
    width: 55,
    align: 'center',
  },
  {
    prop: 'title',
    label: '操作类型',
    minWidth: 80,
    align: 'center',
  },
  {
    prop: 'username',
    label: '操作账号',
    minWidth: 100,
    align: 'center',
  },
  // {
  //   prop: 'method',
  //   label: '请求方法',
  //   minWidth: 80,
  //   align: 'center',
  // },
  // {
  //   prop: 'module',
  //   label: '操作模块',
  //   minWidth: 80,
  //   align: 'center',
  // },
  {
    prop: 'param',
    label: '请求参数',
    minWidth: 180,
    slot: 'param',
  },
  {
    prop: 'url',
    label: '请求地址',
    minWidth: 180,
    slot: 'url',
  },
  {
    prop: 'content',
    label: '请求响应',
    minWidth: 140,
    slot: 'content',
  },
  {
    prop: 'ip',
    label: 'IP地址',
    minWidth: 110,
    align: 'center',
  },
  // {
  //   prop: 'ip_city',
  //   label: 'IP所属地',
  //   minWidth: 80,
  //   align: 'center',
  // },
  {
    prop: 'os',
    label: '操作系统',
    minWidth: 100,
    align: 'center',
  },
  {
    prop: 'browser',
    label: '浏览器',
    minWidth: 100,
    align: 'center',
  },
  {
    prop: 'exec_time',
    label: '执行时间(秒)',
    width: 110,
    align: 'center',
    formatter: row => row.exec_time ? Number.parseFloat(row.exec_time) : '',
  },
  {
    prop: 'create_time',
    label: '操作时间',
    sortable: 'custom',
    width: 160,
    formatter: row => utils.formatDate(row.create_time, 'YYYY-MM-DD HH:mm:ss'),
  },
  {
    columnKey: 'action',
    label: '操作',
    width: 70,
    slot: 'action',
    align: 'right',
    fixed: 'right',
    showOverflowTooltip: false,
  },
]

const Route = useRoute()

const type = Number(Route?.params?.type) || 0

/** 表格数据源 */
function datasource({ page, limit, where, orders }) {
  return utils.get('/actionLog/index', { ...where, type, ...orders, page, limit })
}

/** 搜索 */
function reload(where) {
  tableRef.value?.reload?.({ page: 1, where })
}

function openInfo(row) {
  current.value = row
  showInfo.value = true
}
</script>

<style scoped></style>
